<template>
  <div class="trace-page">
    <el-tabs v-model="activeTab">
      <!--   概览   -->
      <el-tab-pane label="概览" name="overviewView" class="demo-tabs">
        <TraceOverviewView/>
      </el-tab-pane>
      <!--   调用链   -->
      <el-tab-pane label="调用链" name="traceView">
        <el-tabs tab-position="right" style="" class="demo-tabs">
          <el-tab-pane label="树结构">
            <TraceTreeView/>
          </el-tab-pane>
          <el-tab-pane label="表格">
            <TraceTableView/>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
      <!--   拓扑图   -->
      <el-tab-pane label="拓扑图" name="topology" class="demo-tabs">
        <Topology/>
      </el-tab-pane>
      <!--   微服务   -->
      <el-tab-pane label="微服务" name="traceService" class="demo-tabs">
        <el-tabs tab-position="left" style="" class="demo-tabs">
          <el-tab-pane label="微服务">
            <TraceServiceView/>
          </el-tab-pane>
          <el-tab-pane label="实例">
            <TraceInstanceView/>
          </el-tab-pane>
          <el-tab-pane label="接口">
            <TracePathView/>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
      <!--   日志   -->
      <el-tab-pane label="日志" name="traceLog" class="demo-tabs">
        <TraceLog/>
      </el-tab-pane>
      <el-tab-pane label="告警" name="TraceAlarm" class="demo-tabs">
        <TraceAlarmView/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import {ref} from 'vue';
import TraceTableView from './trace/TraceTableView.vue'
import TraceOverviewView from "./trace/TraceOverView.vue"
import TraceTreeView from './trace/TraceTreeView.vue'
import Topology from './trace/TopologyChart.vue'
import TraceServiceView from './trace/TraceServiceView.vue'
import TraceLog from './trace/TraceLogView.vue'
import TraceAlarmView from "./trace/TraceAlarmView.vue";
import TraceInstanceView from "./trace/TraceInstanceView.vue";
import TracePathView from "./trace/TracePathView.vue";


const activeTab = ref('overviewView');

</script>

<style scoped>
.demo-tabs{
  width: 100%;
}
</style>
